<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-form ref="article" :model="article" label-width="120px">
                <el-form-item label="文章标题:">
                    <el-input v-model="article.title"></el-input>
                </el-form-item>
                <el-form-item label="文章图片:">
                    <el-upload class="avatar-uploader" :data="pic" :action="getLocation" :show-file-list="false" v-loading.fullscreen.lock="fullscreenLoading" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload1">
                        <img v-if="article.img_url" :src="ip+article.img_url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="tips">建议尺寸：325*280像素</span>
                </el-form-item>
                <el-form-item label="文章类型">
                    <el-select v-model="article.type_id" placeholder="请选择文章类型">
                        <el-option v-for="a_type in article_type" :key="a_type.id" :label="a_type.name" :value="a_type.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="栏目">
                    <el-select v-model="article.clazz" placeholder="请选择文章类型">
                        <el-option v-for="(type,index) in clazzs" :key="index" :label="type" :value="type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="!pic_" label="文章内容视频:">
                    <el-upload :file-list="mov_filelist" :data="video" :action="get_video_Location" list-type="picture" v-loading.fullscreen.lock="fullscreenLoading" :on-success="list_handleAvatarSuccess" :on-remove="movie_remove" :before-upload="beforeAvatarUpload_video">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item v-show="pic_" label="正文内容" prop="content">
                    <quill-editor :options="editorOption" v-model="article.content" ref="myEdit"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">保存</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-upload class="upload-demo" :action="getLocation" :before-upload='beforeAvatarUpload' :data="pic1" :on-success='upScuccess' ref="upload" style="display:none">
            <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
        </el-upload>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { pic_location, movie_location, ip } from '../../utils/local.js'
import { mapState } from 'vuex'
import { onSuccess } from '../../utils/quill.js'
import { allArticle, allArticleType, addArticle, putArticle } from '../../api/server.js'
import article from '../../vuex/modules/article';

export default {
    data() {
        return {
            getLocation: pic_location,
            clazzs: ['图文', '视频'],
            fullscreenLoading: false,
            uploadType: '',
            pic: {},
            pic1: {},
            article_type: [],
            filelist: [],
            video: {},
            resourceFile: [],
            get_video_Location: movie_location,
            mov_filelist: [],
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 2 }],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'indent': '-1' }, { 'indent': '+1' }],
                        [{ 'direction': 'rtl' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'font': [] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                        ['link', 'image', 'video']
                        // [{ 'font': ['Microsof[]
                    ]
                }
            },
            ip: ip
        }
    },
    computed: {
        ...mapState({
            article: state => state.Article.article
        }),
        pic_() {
            if (this.article.clazz == '图文')
                return true
            return false
        }
    },
    created() {
        this.getAllArticleType(1, 20)
        console.log('article', this.article)
        if (this.article.clazz == '视频') {
            let obj = {}
            let name = this.article.content_img.split('/').pop()
            obj.url = this.article.content_img
            obj.name = name
            this.mov_filelist.push(obj)

        }
    },
    methods: {
        videoHandler(state) {
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'video'
        },
        imgHandler(state) {
            console.log('点击图片', state)
            this.addRange = this.$refs.myEdit.quill.getSelection()
            if (state) {
                document.getElementById('imgInput').click()
            }
            this.uploadType = 'image'
        },
        handleAvatarSuccess(res) {
            if (res.code === '000000') {
                this.article.img_url = res.result.filePath
                this.fullscreenLoading = false
            }
        },
        beforeAvatarUpload1(file) {
            this.pic.pictureFile = file
            this.pic.width = 325 * 3
            this.pic.height = 280 * 3
            return this.upload(file)
        },
        beforeAvatarUpload(file) {
            this.pic1.pictureFile = file
            return this.upload(file)
        },
        upload(file) {
            this.fullscreenLoading = true
        },
        getAllArticleType(page, pageSize) {
            allArticleType({ page, pageSize })
                .then(res => {
                    this.article_type = res.result
                })
        },
        upScuccess(e) {
            onSuccess(this, e)
            this.resourceFile.push(e.result.resultMap)
        },
        choose() {
            console.log('111')
        },
        add() {
            let article = this.article
            article.imgUrl = article.img_url
            article.typeId = article.type_id
            if (!this.pic_) {
                console.log('filelist', this.filelist, this.mov_filelist)
                article.content_img = this.filelist[0].url
            }
            // article.contentImg = this.filelist.map(it => it.url).join(',')
            console.log("resoureceFile", this.resourceFile)
            article.resourceFile = this.resourceFile.join(";")
            console.log('article', article)
            if (article.id) {
                putArticle({ article })
                    .then(res => {
                        this.$message.success('修改成功')
                    })
            } else {
                addArticle({ article })
                    .then(res => {
                        this.$message.success('添加成功')
                    })
            }
        },
        list_handleAvatarSuccess(res) {
            console.log('列表', res)
            if (res.code === '000000') {
                let obj = {}
                obj.url = res.result.filePath
                obj.name = res.result.fileName
                this.filelist.push(obj)
                this.fullscreenLoading = false
            }
        },
        beforeAvatarUpload_video(file) {
            this.video.movieFile = file
            return this.upload
        },
        pic_remove(file, filelist) {
            console.log('remove', file, filelist)
            this.filelist = filelist
        },
        movie_remove(file, filelist) {
            console.log('remove', file, filelist)
            this.mov_filelist = filelist
        },
        back() {
            console.log('后退')
            this.$router.go(-1)
        }
    },
    mounted() {
        console.log('toolbar', this.$refs.myEdit.quill.getModule('toolbar'))
        this.$nextTick(() => {
            this.$refs.myEdit.quill.getModule('toolbar').addHandler('image', this.imgHandler),
                this.$refs.myEdit.quill.getModule('toolbar').addHandler('video', this.videoHandler)
        })

    },
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}
.avatar-uploader {
  width: 325px;
  height: 280px;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  text-align: center;
  margin-top: 1%;
}
.avatar-uploader .el-upload {
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 325px;
  height: 280px;
  display: block;
}
// .ql-video {
//   disabled: none;
// }
.tips {
  color: gray;
  margin-left: 10%;
}
</style>